<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div id="test" class="test"
        style="position: absolute; top: 100px; left: 100px;z-index:10000;background-color: red;color:#fff;">
        由于这里没有使用工程化,不好书写,这里介绍怎么使用
    </div>
    <div class="fun-menu">
        <div class="fun-menu">
            vue3版本
            <button onclick="load()">启动弹窗</button>
            <button onclick="flyto()">飞到</button>
            <button onclick="showChange(false)">隐藏</button>
            <button onclick="showChange(true)">显示</button>
            <button onclick="updateContext()">更新内容</button>
            <button onclick="closeP()">关闭</button>
        </div>

    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>
    <script src="../libs/cpc/index.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            camera: {
                position: {
                    x: 119.3006147,
                    y: 26.0316619,
                    z: 4809,
                },
                angle: {
                    heading: 7.33,
                    pitch: -72.53,
                    roll: 0,
                },
                duration: 3,
                complete: () => {
                    console.log("飞行结束了");
                }
            },
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ]
        });

        function load() {
            const point = {
                x: 119,
                y: 26
            }
            const props = {
                propsIndex: 110
            }
            //例如： import popupWindowDom from '../components/popupWindowDom.vue';
            var dom = Vue.createApp(引入的vue文件, props);
            popupwindow = new cpc.PopupWindow(point, dom);
            map.add(popupwindow);
        }
        function flyto() {
            popupwindow.flyTo();
        }
        function closeP() {
            map.remove(popupwindow);
        }
        function showChange() {
            popupwindow.show = this.isShow;
        }
        function updateContext() {
            popupwindow.getDomInstance().innerHTML = "改变文字"
        }
    </script>
</body>

</html>